<template>
  <div style="display: flex;height:100%;justify-content: center;
    flex-direction: row;
    align-items: flex-start;min-width: 1200px" >

      <div class="card-left" >
        <div>
          <el-calendar v-model="value" />
        </div>
      </div>
      <div  class="card-right">
        <div class="rightCard-top">
          <div class="top-show">
            <img class="top-svg" src="public/homeFront/xinxijilu.svg">
            <div class="top-show-para">
              <h1>交流墙</h1>
              <h2>贴子数：{{data.wallNumber}}</h2>
            </div>
          </div>
          <div class="top-show">
            <img class="top-svg" style="height: 60%" src="public/homeFront/kechengbiao.svg">
            <div class="top-show-para">
              <h1>选课表</h1>
              <h2>课程数：{{data.courseNumber}}</h2>
            </div>
          </div>
          <div class="top-show">
            <img class="top-svg" src="public/homeFront/kechengzhouqi.svg">
            <div class="top-show-para">
              <h1>选课记录</h1>
              <h2>选课数：{{data.noteNumber}}</h2>
            </div>
          </div>
        </div>

        <div class="rightCard-buttom">
          <div style="border-left: 5px solid #71abff;margin-top: 25px;height: 45px;padding-left: 10px;line-height: 40px"><h1 style="margin: 0 0;">通知栏：</h1></div>
          <div class="buttom-notice">
            <div v-for="item in data.tableData" :key="item.id" class="notice-bar">
                <p>{{item.content}}</p><br>
                <h4 style="text-align: right;color:#00000073;margin-top: 0px;font-size: 20px">------{{item.time}}</h4>
            </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script setup>
  import request from "@/utils/request";
  import {ref,reactive} from "vue";
  const value = ref(new Date())
  const user = JSON.parse(localStorage.getItem('student-user') || '{}')
const data=reactive({
  wallNumber:'',
  courseNumber:'',
  noteNumber:'',
  tableData:[]
})
  const  load =() =>{
    request.get("/notice/getAll", {
      params:{
        number: 1,
        content:''
      }
    } ).then(res => {
      data.tableData = res.data;
    })
  }
  load();
  const numShow=(id)=>{
    if(Number(id)===1){
      if(Number(data.wallNumber)>99){
        data.wallNumber = '99+'
      }
    }else if(Number(id)===2){
      if(Number(data.courseNumber)>99){
        data.courseNumber = '99+'
      }
    }else{
      if(Number(data.noteNumber)>99){
        data.noteNumber = '99+'
      }
    }
  }
const wallLoad=()=>{
    request.get("/article/select",{
      params:{
      pageNum:'1',
      pageSize:'10',
      name:'',
      username:''
    }}).then(res=>{
      data.wallNumber= res.data.total || 0
    })
}
const courseLoad=()=>{
    request.get("/course/selectPage",{
      params:{
        pageNum: '1',
        pageSize:'10',
        name: '',
        number: '',
        teacher: ''
      }
    }).then(res=>{
      data.courseNumber = res.data.total ||0
    })
}
const noteLoad=()=>{
    request.get('/courseSel/getAll',{
      params:{
        pageNum: '1',
        pageSize:'10',
        name: '',
        number: '',
        teacher: ''
      }
    }).then(res=>{
      data.noteNumber = res.data.total ||0
    })
}
  wallLoad();
  courseLoad();
  noteLoad();
</script>

<style>
.notice-bar{
  margin: 20px 0;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0);
  width: 100%;
  border-radius: 0px;
  min-height: 130px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 14;
  -webkit-box-orient: vertical;
  padding: 5px 22px;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  font-size: 24px;
}
.buttom-notice{
  overflow: scroll;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.13);
  height: 68%;
  width: 100%;
  border-top: 2px dotted rgba(255, 255, 255, 0.47);
  padding: 5px 20px;
  margin-bottom: 7%;
}

.top-svg{
  height: 70%;
}
.top-show-para{

}
.top-show{
  width: 30%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
 backdrop-filter: blur(8px);
}
.rightCard-top{
  height: 25%;
  padding-bottom: 20px;
  background-color: transparent;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;

}
.rightCard-buttom{
  height: 62%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  margin: 10px 20px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

 body{
  color: white;
}

.card-right{
  max-width: 1000px;
  width: 60%;
  height: 47rem;
  background-color: rgba(255, 255, 255, 0);
  margin-left: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-top: 0;
  padding: 0 40px;
  min-width: 840px;
}
.card-left {
  margin-left: 50px;
  margin-top: 18px;
  width: 500px;
  min-width: 360px;
  background-color: rgba(255, 255, 255, 0.13) !important;
  border-radius: 25px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.el-calendar-table thead th{
  color: #ffffff;
}
.dateCard{
  background-color: #eeeeee;
  border-radius: 10px;
}
.headBar{
  -webkit-text-stroke: 1px #3a3a3a;
  color: transparent;
  text-align: center;
  margin-left: 10px;
  padding-left: 8px;
  background-color:white;
  border-radius: 25px;
  margin-bottom: 10px;
  /*height:640px;*/
  width: 50px;
  word-wrap :break-word ;
  font-family: 华文楷体;
  letter-spacing: 20px;
  font-size: 30px;
  box-shadow: 0px 1px 3px 1px #adadad;
}
.el-button{
  background-color: transparent!important;
  color: white;
}
.el-calendar{
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0) !important;
  --el-calendar-selected-bg-color:#ffffff94;
  backdrop-filter: blur(8px);
}
.el-calendar__title{
font-size: 24px;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
font-size: 2em;
}
.el-calendar__button-group{
  font-size: 24px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  font-size: 2em;
}
.cardHome{
  background-color: transparent;
}
.el-calendar-table .el-calendar-day{
  line-height: 32px;
  text-align: center;
  font-family: 黑体;
  font-size: 18px;
}
</style>